<script lang="ts" setup>
import { ref } from 'vue';
import { useRouterStore } from '@/store/router';
import { RouteRecordNormalized, RouteRecordRaw, useRouter } from 'vue-router';
const routerService = useRouter()
const routerStore = useRouterStore()

// 菜单切换
const handlerMenu = (munu:RouteRecordNormalized ,itemMenu?:RouteRecordRaw) => {

  resetMenu()
  munu.meta.isClick = true;
       if(itemMenu && itemMenu.meta){
        itemMenu.meta.isClick = true;
        console.log(itemMenu,'itemMenu')
        routerService.push(itemMenu)
       }
}

// 菜单重置
const resetMenu = () => {
  routerStore.routes.forEach((item:RouteRecordNormalized) => {
    item.meta.isClick = false;
    item.children.forEach((itemMenu:RouteRecordRaw) => {
      if(itemMenu?.meta?.isClick){
        itemMenu.meta.isClick = false;
      }
    });
  });
}

</script>

<template>
    <div class="mean  ">
      <!-- logo -->
      <div class="mean-img flex items-center justify-center">
         <div class="logo">
          <img class="logo-img rounded-full" src="/public/images/home.jpg" alt="">
        
         </div>
         <span class="ml-2">uncleTom的脚手架</span>

      </div>

      <!-- 菜单 -->
       <div class="left-container">
        <dl v-for="(item,index) in routerStore.routes" :key="index">
          <dt @click="handlerMenu(item)">
             <div class="title-container ">
              <i class="iconfont  mr-2 beizhu" :class="item.meta.icon"></i>
              <span class="text-md">{{ item.meta.title }}  </span>
             </div>
             <i class="iconfont icon-arrowRight-copy duration-300" :class="{'rotate-180':item.meta.isClick}"></i>
          </dt>
          <template v-if="item.meta.isClick">
            <dd   :class="{'active':CMenu?.meta?.isClick}" v-for="(CMenu,ins) of item.children" :key="ins" @click="handlerMenu(item,CMenu)">{{ CMenu?.meta?.title }}</dd>

          </template>
        </dl>
       </div>
    </div>
</template>

<style lang="scss" scoped>
  .home-container{
    @apply w-screen h-screen  flex ;

    .mean{
      @apply w-[200px] bg-gray-800 p-4

   
    }

    .mean-img{
        @apply   flex text-white text-sm ;

        .logo{
          @apply w-[40px] h-[40px] rounded-full overflow-hidden;
        }
      }

    .home-content{
      @apply w-full h-full bg-gray-200 flex-1 ;
    }
  }
  
  .left-container{

    dl{
      @apply text-gray-300 text-sm;

      dt{
         @apply text-sm mt-6 flex items-center justify-between cursor-pointer;
      }

      .title-container{
        @apply flex items-center justify-center;
      }
    }

    dd{
      @apply py-3 pl-4 my-2 text-white rounded-md cursor-pointer hover:bg-violet-500;
      &.active  {
       @apply bg-violet-700  ;
      }
    }
  }


  .beizhu{
    font-size: 22px;
  }
</style>